<!-- 网点运单item组件(不包含待审核待提货这两是单独的) -->
<template>
  <view class="list_item">
    <view class="card" @click="toInfoPage(item.statusVal)">
      <!-- <view>
                <view style="color:blue;font-weight:bold;font-size:24rpx;">allPaid {{item.allPaid}} wxStatus {{ item.wxStatus }} = status {{ item.status }} = isExamine {{ item.isExamine }}</view>
                <view style="color:red;font-weight:bold;font-size:24rpx;">前端根据这三条件 过滤后标签statusVal —— {{ item.statusVal }}</view>
            </view> -->
      <view class="top">
        <view
          >承运单号:{{ item.billNo }}
          <Order size="10" @click="copy(item.billNo)" />
        </view>
        <view class="status">{{ item.statusVal }}</view>
      </view>
      <view class="center">
        <view>
          <view class="content">{{ item.startBranchName }}</view>
          <view class="tit">起运地</view>
        </view>
        <view>
          <image class="car" src="@/assets/images/homePage/shouye_img_qianwang@3x.png" />
        </view>
        <view>
          <view class="content">{{ item.destinationBranchName }}</view>
          <view class="tit">目的地</view>
        </view>
      </view>
      <view class="list">
        <view class="it">
          <view>货物信息：{{ item.goodsInfo[0]?.goodsName || '暂无数据' }}，</view>
          <view :style="{ color: item.goodsInfo[0]?.upNumber && item.goodsInfo[0]?.upNumber !== item.goodsInfo[0]?.goodsNumber ? '#0966FF' : '#666' }">
            {{ filterGoodsNum(item.goodsInfo[0]) }}</view
          >
          <view>{{ filterGoodsInfo(item.goodsInfo[0]) }}</view>
        </view>
        <view class="it" v-if="item.billingTime">下单时间：{{ filterTime(item.billingTime) || '暂无数据' }}</view>
        <view class="it" v-if="item.lastUpTime">上次提货时间：{{ filterTime(item.lastUpTime) || '暂无数据' }}</view>
        <view class="it" v-if="item.lastUpTime">签收时间：{{ filterTime(item.lastUpTime) || '暂无数据' }}</view>
      </view>
      <view class="bottom">
        <!-- 只有待支付有待付款 全部的时候会显示 -->
        <view :style="{ visibility: item.allPaid ? 'hidden' : 'visible' }" class="need_pay"> 待付款：￥{{ allPay.toFixed(2) || '暂无数据' }}</view>
        <view class="btn_box">
          <nut-button v-if="['待确认', '待支付'].includes(item.statusVal)" class="btn btn1" @click.stop="cancel(item.ssoId)">取消订单</nut-button>
          <nut-button v-if="['待确认'].includes(item.statusVal)" class="btn btn2" @click.stop="toConfirmPage(item)">确认订单</nut-button>
          <nut-button v-if="['待审核'].includes(item.statusVal)" class="btn btn2" @click.stop="toReviewPage(item)">审核运单</nut-button>
          <nut-button v-if="['待支付'].includes(item.statusVal)" class="btn btn2" @click.stop="toPayPage(item)">我要收款</nut-button>
          <!-- 1020 -->
          <!-- <nut-button v-if="['待提货', '运输中', '已完成'].includes(item.statusVal)" class="btn btn1"
                        @click.stop="toCode">运单二维码</nut-button> -->
          <nut-button v-if="['待提货'].includes(item.statusVal)" class="btn btn2" @click.stop="toSignPage(item)">我要交货</nut-button>
          <nut-button v-if="['运输中', '已完成'].includes(item.statusVal)" class="btn btn2" @click.stop="toDetailMap()">查看物流</nut-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { OrderListType } from '@/type/index'
import useOrderStore from '@/store/order'
import Taro from '@tarojs/taro'
import dayjs from 'dayjs'
import { getLogisticsInfo } from '@/@api/order' // 物流详情接口
import { Order } from '@nutui/icons-vue-taro'
import { ref } from 'vue'
import { cancelOrder } from '@/@api/wait' // wait的接口

import logisticsInfoStore from '@/store/logistics'
const logisticsStore = logisticsInfoStore()

const props = defineProps<{
  item
}>()

const item = props.item || []

const orderStore = useOrderStore()

const allPay = ref(0) //待付款

// 计算待付款
item.costList.forEach((item) => {
  allPay.value = allPay.value + (item.actualMoney - item.paidMoney)
})

// 卡片跳转去对应的详情页
function toInfoPage(statusVal) {
  orderStore.orderInfo = item
  console.log('跳转到对应的详情页')
  switch (statusVal) {
    case '待确认':
      console.log('待确认')
      Taro.navigateTo({
        url: '/pages2/waybillPage/confirmInfo'
      })
      break
    case '待审核':
      console.log('待审核')
      Taro.navigateTo({
        url: '/pages2/waybillPage/reviewInfo'
      })
      break
    case '待支付':
      console.log('待支付')
      Taro.navigateTo({
        url: '/pages2/waybillPage/payInfo'
      })
      break
    case '待提货':
      console.log('待提货')
      Taro.navigateTo({
        url: '/pages2/waybillPage/signInfo'
      })
      break
    case '运输中':
      console.log('运输中')
      Taro.navigateTo({
        url: '/pages2/waybillPage/transInfo'
      })
      break
    case '已完成':
      console.log('已完成')
      Taro.navigateTo({
        url: '/pages2/waybillPage/finishInfo'
      })
      break
    default:
      console.log('其他情况')
      break
  }
}

// 跳转到确认页
function toConfirmPage(item: OrderListType) {
  orderStore.orderInfo = item
  Taro.navigateTo({
    url: '/pages2/reviewPage/index'
  })
}

// 跳转到审核页
function toReviewPage(item: OrderListType) {
  orderStore.orderInfo = item
  Taro.navigateTo({
    url: '/pages2/reviewPage/index'
  })
}

// 跳转到交货签收页
function toSignPage(item: OrderListType) {
  orderStore.orderInfo = item
  Taro.navigateTo({
    url: '/pages2/signPage/index'
  })
}

// 跳转到我要收款页
function toPayPage(item: OrderListType) {
  orderStore.orderInfo = item
  Taro.navigateTo({
    url: '/pages2/waybillPage/payInfo'
  })
}

const emit = defineEmits(['cancel']) // 触发父组件里的@search

// 取消订单
async function cancel(ssoId) {
  const res = await cancelOrder({ ssoId })
  if (res.data.code == 200) {
    Taro.showToast({
      icon: 'success',
      title: '取消运单成功'
    })
    emit('cancel')
  } else {
    Taro.showToast({
      icon: 'error',
      title: '取消失败'
    })
  }
}

// 运单二维码
function toCode() {
  Taro.showToast({
    title: `暂未开放`,
    icon: 'error',
    duration: 2000
  })
  console.log('跳转去运单二维码')
}

/* 查看物流详情 */
async function toDetailMap() {
  console.log('billItem里的查看物流')
  // 存储数据
  orderStore.orderInfo = item
  const dataParams = {
    billNo: item.billNo, // '202307106'
    orderCode: ''
  }
  const { data } = await getLogisticsInfo(dataParams)
  if (data.code == 200) {
    let info = data.data
    console.log(info, '请求物流详情存入logisticsStore.info')
    logisticsStore.info = info
    Taro.navigateTo({
      url: '/pages2/mapDetail/index'
    })
  }
}

// 复制订单标号
const copy = (msg) => {
  Taro.setClipboardData({
    data: msg,
    success: function (res) {
      Taro.getClipboardData({
        success: function (res) {
          console.log(res.data) // data
          Taro.showToast({
            title: `复制成功`,
            icon: 'success',
            duration: 2000
          })
        }
      })
    }
  })
}

// 过滤时间
function filterTime(val) {
  return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
}

// 过滤货物件数
// function filterGoodsNum(val) {
//   if (val) {
//     const { upNumber, goodsNumber } = val
//     let goodsNum
//     if (goodsNumber) {
//       if (upNumber !== goodsNumber) {
//         goodsNum = upNumber !== 0 ? upNumber + '/' + goodsNumber : goodsNumber
//       } else {
//         goodsNum = goodsNumber
//       }
//     }
//     return `${goodsNum}件，`
//   }
// }

// 过滤货物件数
function filterGoodsNum(val) {
  if (val) {
    const { upNumber, goodsNumber } = val
    let goodsNum
    if (goodsNumber) {
      if (Number(upNumber) !== Number(goodsNumber)) {
        goodsNum = Number(upNumber) !== 0 ? '(' + Number(upNumber) + '/' + Number(goodsNumber) + ')' : Number(goodsNumber)
      } else {
        goodsNum = Number(goodsNumber)
      }
    }
    return `${goodsNum}件`
  }
}

// 过滤货物重量体积包装
function filterGoodsInfo(val) {
  if (val) {
    const { weigh, goodsVolume, packing } = val
    return `${weigh || ''}kg，${goodsVolume || ''}m³，${packing || ''}`
  }
}
</script>

<style lang="scss">
.list_item {
  width: 702rpx;
  margin: 8rpx auto;
  padding-top: 0 !important;
}

.card {
  margin: 16rpx auto;
  background: #fff;
  border-radius: 10rpx;
  padding: 24rpx;
  box-sizing: border-box;

  .top {
    width: 654rpx;
    font-size: 22rpx;
    color: #252525;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .status {
      display: inline-block;
      height: 40rpx;
      line-heifht: 40rpx;
      text-align: center;
      background: #ffeddb;
      color: #ff8f1f;
      font-size: 24rpx;
      padding: 4rpx 12rpx;
      border-radius: 10rpx;
    }
  }

  .center {
    width: 580rpx;
    margin: 36rpx auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;

    .content {
      font-size: 28rpx;
      color: #252525;
      font-weight: bold;
    }

    .tit {
      font-size: 24rpx;
      color: #999;
    }

    .car {
      width: 224rpx;
      height: 56rpx;
    }
  }

  .list {
    width: 654rpx;
    margin: 36rpx auto;
    background: #f5f5f5;
    color: #666;
    font-size: 24rpx;
    padding: 12rpx;
    box-sizing: border-box;
    border-radius: 10rpx;

    .it {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin: 10rpx;
    }
  }

  .bottom {
    width: 654rpx;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 0 20rpx;

    .need_pay {
      color: #ff8f1f;
      font-size: 24rpx;
    }

    .btn_box {
      display: flex;
      justify-content: center;
      align-items: center;

      .btn {
        display: inline-block;
        height: 56rpx;
        line-height: 56rpx;
        border-radius: 88rpx;
        padding: 12px 24px;
        text-align: center;
        font-size: 24rpx;
        box-sizing: border-box;
      }

      .btn1 {
        border: 1rpx solid #c4c4c4;
        color: #252525;
        margin-right: 16rpx;
      }

      .btn2 {
        border: 1rpx solid #0966ff;
        color: #0966ff;
      }
    }
  }
}
</style>
